<template>
    <div class="comp-input-c">
        <input v-model="inputValue" :class="{'inputarea-cur': inputValue.length}" class="inputarea" type="text" :placeholder="inputObject.default">
        <transition name="fade">
        <div v-show="tipsShow" class="apply-label">{{inputObject.tipsInfo}}</div>
        </transition>                
    </div>
</template>

<script>
export default {
    name: 'inputComponents',
    props: {
        inputObject: {
            rules: String,
            tipsInfo: String,
            key: String,
            default: String
        } 
    },
    data ( ) {
        return {
            inputValue: '',
            tipsShow: false,
            timer: null         
        }
    },
    watch: {
        inputValue ( ) {
            let self = this
            if (self.timer) {
                clearTimeout(self.timer)
            } 
            self.timer = setTimeout(() => {
                if( self.inputObject.rules.test( self.inputValue ) ) {
                    self.tipsShow = false                                  
                }else{
                    self.tipsShow = true
                } 
                self.$emit('inputValueUpdate', [self.inputObject.key,self.inputValue,!self.tipsShow]) 
            }, 20)                        
        }
    }
}
</script>

<style lang="stylus" scoped>      
.comp-input-c
    width 100%
    font-size 14px
    color #c8c8c8
    .inputarea
        width 100%
        height 45px
        padding 5px
        box-sizing border-box
        line-height 35px
        color #c8c8c8
        font-size 16px
    .inputarea-cur 
        color #333
    .apply-label
        width 100%
        height 25px
        line-height 15px
        font-size 13px
        color red  
input::-webkit-input-placeholder
    color #A7A7A7
    font-size 14px
input::-moz-placeholder
    color #A7A7A7
    font-size 14px
input:-moz-placeholder
    color #A7A7A7
    font-size 14px
input:-ms-input-placeholder
    color #A7A7A7 
    font-size 14px    
</style>